<template>
  <div class="container">
    <VueFlow :nodes="nodes" :nodes-draggable="false" :edges="edges" :max-zoom="1.2" :min-zoom="0.8"
      @nodeClick="nodeClickHandler">
      <template #node-custom="props">
        <CustomNode v-bind="props" />
      </template>
    </VueFlow>
    {{ flowArray[0] }}
  </div>
  <el-dialog v-model="optionVisible" title="工序编辑" width="800">
    <el-form :inline="true" label-position="left" :model="stepForm" class="p-4">
      <el-form-item label="作业方法" label-width="120px">
        <el-input v-model="stepForm.content" style="width: 200px;" type="textarea" clearable />
      </el-form-item>
      <el-form-item label="作业人员代码" label-width="120px">
        <el-input v-model="stepForm.peopleCode" style="width: 200px;" type="textarea" clearable />
      </el-form-item>
      <el-form-item label="危险源" label-width="120px">
        <el-input v-model="stepForm.danger" style="width: 200px;" type="textarea" clearable />
      </el-form-item>
      <el-form-item label="使用工具、材料" label-width="120px">
        <el-input v-model="stepForm.materail" style="width: 200px;" type="textarea" clearable />
      </el-form-item>
      <el-form-item label="安全措施" label-width="120px">
        <el-input v-model="stepForm.method" style="width: 200px;" type="textarea" clearable />
      </el-form-item>
      <el-form-item label="技术要点" label-width="120px">
        <el-input v-model="stepForm.tec" style="width: 200px;" type="textarea" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="optionVisible = false">取消</el-button>
        <el-button type="primary" @click="saveFile">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>


<script lang="ts" setup>
import { VueFlow } from '@vue-flow/core'
// import { ref, watch } from 'vue'
// import CustomNode from './customNode.vue'
const props = defineProps({
  isEdit: Boolean,
  flowArray:Array
})
const optionVisible = ref(false)
const stepForm = ref({
  content: '',
  danger: '',
  tec: '',
  peopleCode: '',
  materail: '',
  method: ''
})
const tempNodes = [
  {
    id: '1',
    label: '步序1=>2',
    data: {
      content: '到施工现场查看设备确定位置，将使用的工具、材料准备好并摆放整齐',
      peopleCode: '钳工2、钳工3、钳工4, ',
      materail: ' 生命绳124条、猫爪24个、活动扳手12″2把',
      danger: '搬抬工具及备件挤压伤人。',
      method: '检修现场围好安全绳挂检修旗，施工前做好安全技术交底。',
      tec: ''
    },
    type: 'custom',
    position: { x: 0, y: 50 },
  },
  {
    id: '2',
    label: '步序2=>3',
    data: {
      content: '三方确认停电挂牌, ',
      peopleCode: '钳工1、点检、生产, ',
      materail: ' 生命绳124条、猫爪24个、活动扳手12″2把',
      danger: ' 1、机械伤害, ',
      method: '1.三方确认停电挂牌,',
      tec: ''
    },
    type: 'custom',
    position: { x: 150, y: 100 },
  },
  {
    id: '3',
    label: '步序3=>4',
    data: {
      content: '安全绳搭设, ',
      peopleCode: '钳工2、钳工3、钳工4,',
      materail: '生命绳124条、猫爪24个、活动扳手12″2把,',
      danger: '1、物体打击, ',
      method: ' 1、人员合理站位,',
      tec: ''
    },
    type: 'custom',
    position: { x: 250, y: 150 },
  }, {
    id: '4',
    label: '步序4=>5',
    data: {
      content: '旧网格板拆除吊离, ',
      peopleCode: '焊工1、钳工1、起重1, ',
      materail: '气割1套、安全带4条、3、4, ',
      danger: ' 1、高处作业,2、动火作业,3、起重作业,4、物体打击, ',
      method: ' 1、系挂好安全带，高挂抵用，挂钩安全可靠, ',
      tec: ''
    },
    type: 'custom',
    position: { x: 250, y: 240 },
  }, {
    id: '5',
    label: '步序5=>6',
    data: {
      content: ' 清理基座, ',
      peopleCode: ' 钳工2、钳工3, ',
      materail: '安全带4条, ',
      danger: ' 1、高处作业,  ',
      method: ' 1、系挂好安全带，高挂抵用，挂钩安全可靠, ',
      tec: '基座清理干净无异物'
    },
    type: 'custom',
    position: { x: 250, y: 240 },
  }, {
    id: '6',
    label: '步序6=>7',
    data: {
      content: '新网格板吊运回装, ',
      peopleCode: ' 焊工1、钳工1、起重1',
      materail: '安全带4条、3、4,',
      danger: ' 1、高处作业,2、动火作业,3、起重作业,4、物体打击, ',
      method: '1、系挂好安全带，高挂抵用，挂钩安全可靠, ',
      tec: ''
    },
    type: 'custom',
    position: { x: 250, y: 240 },
  }, {
    id: '7',
    label: '步序7=>8',
    data: {
      content: ' 网格板焊接加固, ',
      peopleCode: '焊工1、钳工1、起重1, ',
      materail: '拖线盘380V、220V各1个、焊机380V1台、安全带4条、1、2, ',
      danger: ' 1、高处作业,2、动火作业,3、用电作业,4、物体打击, ',
      method: ' 1、系挂好安全带，高挂抵用，挂钩安全可靠,  ',
      tec: ''
    },
    type: 'custom',
    position: { x: 250, y: 240 },
  }, {
    id: '8',
    label: '步序8=>9',
    data: {
      content: ' 现场清理, ',
      peopleCode: '钳工2、钳工3、钳工4, ',
      materail: '',
      danger: '',
      method: ' ',
      tec: ''
    },
    type: 'custom',
    position: { x: 250, y: 240 },
  }, {
    id: '9',
    label: '步序9=>10',
    data: {
      content: ' 三方确认摘牌试车, ',
      peopleCode: '钳工1、点检、生产, ',
      materail: '',
      danger: '',
      method: '',
      tec: ''
    },
    type: 'custom',
    position: { x: 250, y: 240 },
  }
]
let tempEdges = []
let begin = 0
let count = 0
let tempXy = { x: 50, y: 80 }
let edgeId = 0
// 排序
tempNodes.forEach(el => {
  let xy = { x: 50, y: 80 }
  if (tempXy.x > 800) {
    count++
    begin = 0
  }
  xy.x = 40 + 180 * begin
  xy.y = 80 + 120 * count
  begin++
  tempXy = xy
  el.position = xy
  let edge = {
    id: 'el' + edgeId++,
    type: 'step',
    source: el.id,
    target: (parseInt(el.id) + 1).toString(),
    animated: true,
  }
  tempEdges.push(edge)
})
const nodes = ref(tempNodes)
const edges = ref(tempEdges)
// console.log(tempEdges);

const nodeClickHandler = (val) => {
  if (props.isEdit == true) {
    const node = val.node;
    stepForm.value = node.data
    optionVisible.value = true
  } else {

  }
};
const saveFile = () => {
  optionVisible.value = false
}

</script>
<style>
/* these are necessary styles for vue flow */
@import "@vue-flow/core/dist/style.css";
/* this contains the default theme, these are optional styles */
@import "@vue-flow/core/dist/theme-default.css";
</style>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 400px;
}

.vue-flow__node-input {
  border: 1px solid blue !important;
}
</style>